import React, { useEffect, useState } from 'react';
import * as service from '../../api/jiang/index'
import '../../styles/jiang/DataSign.scss'
import { DatePicker, Space, Table, Button, Select, Card } from 'antd';

import { Column } from '@ant-design/plots';
interface Props {

}

const { RangePicker } = DatePicker;

function DataSign(props: Props) {
    const [signlist, setSign] = useState([])
    const [loading, setLoading] = useState(false);
    const [listerone, setListerone] = useState([])
    const [listertwo, setListertwo] = useState([])
    const [listerthree, setListerthree] = useState([])
    const [data, setData] = useState([]);

    useEffect(() => {
        setLoading(true);
        service.sign_list().then((res) => {
            // console.log(res);
            setSign(res.data)
            setLoading(false);
        })

        service.dataqy().then((res) => {
            // console.log(res);
            setData(res.data)
            setLoading(false);
        })

        service.optionlist().then((res) => {
            // console.log(res);
            var arr = res.data.map((item: any) => {
                return { value: item.id, label: item.name }
            })
            setListerone(arr)
        })

        service.teamlist().then((res) => {
            // console.log(res);
            var arr = res.data.map((item: any) => {
                return { value: item.id, label: item.name }
            })
            setListertwo(arr)
        })

        service.teamlistwo().then((res) => {
            // console.log(res);
            var arr = res.data.map((item: any) => {
                return { value: item.id, label: item.name }
            })
            setListerthree(arr)
        })

    }, [])



    const onChange = (value: any, dateString: any) => {
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
    };
    const onOk = (value: any) => {
        console.log('onOk: ', value);
    };

    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
    };

    const config = {
        data,
        height: 200,
        isStack: true,
        xField: 'year',
        yField: 'value',
        seriesField: 'dates',
        minColumnWidth: 30,
        maxColumnWidth: 30,
        columnBackground: {
            style: {
                fill: 'rgba(0,0,0,0.1)',
            },
        },

    };


    const columns = [
        {
            title: '日期',
            dataIndex: 'date',
            key: 'date',
        },
        {
            title: '目标签约量',
            dataIndex: 'count1',
            key: 'count1',
        },
        {
            title: '实际签约量',
            dataIndex: 'count2',
            key: 'count2',
        },
        {
            title: '签约完成率',
            dataIndex: 'count3',
            key: 'count3',
        }
    ]

    return (
        <div className='data-sign' style={{ padding: 20 }}>
            <div className='title'>签约业绩统计</div>

            <Space direction="vertical" size={12}>
                <div>
                    <span>选择签约日期</span>&nbsp;&nbsp;
                    <RangePicker
                        showTime={{ format: 'HH:mm' }}
                        format="YYYY-MM-DD HH:mm"
                        onChange={onChange}
                        onOk={onOk}
                    />
                </div>
            </Space>

            <div className='top'>
                <div className='padding'>
                    <span>机构</span>&nbsp;&nbsp;
                    <Select
                        defaultValue="全部"
                        style={{ width: 160 }}
                        onChange={handleChange}
                        options={
                            listerone

                        }
                    />
                </div>
                <div className='padding'>
                    <span>医生团队</span>&nbsp;&nbsp;
                    <Select
                        defaultValue="请选择"
                        style={{ width: 160 }}
                        onChange={handleChange}
                        options={
                            listertwo

                        }
                    />
                </div>
                <div className='padding'>
                    <span>医生</span>&nbsp;&nbsp;
                    <Select
                        defaultValue="请选择"
                        style={{ width: 160 }}
                        onChange={handleChange}
                        options={
                            listerthree

                        }
                    />
                </div>

            </div>
            <div style={{ padding: "0 100px" }}>
                <Card title="签约量" bordered={false}>
                    <Column {...config} />
                </Card>
            </div>

            <Button style={{ float: 'right', margin: '10px 0' }}>导出</Button>
            <Table columns={columns} dataSource={signlist} loading={loading}
                summary={() => (
                    <Table.Summary fixed>
                        <Table.Summary.Row>
                            <Table.Summary.Cell index={0}>合计</Table.Summary.Cell>
                            <Table.Summary.Cell index={1}>815</Table.Summary.Cell>
                            <Table.Summary.Cell index={2}>713</Table.Summary.Cell>
                            <Table.Summary.Cell index={3}>87%</Table.Summary.Cell>
                        </Table.Summary.Row>
                    </Table.Summary>
                )}
            />

        </div>
    );
}

export default DataSign;